<template>
	<view class="">
		<view class="box">
			<view class="" style="margin-bottom: 30rpx;" v-for="(item,index) in allList" :key="index">
				<view class="title">
					{{item.name}}
				</view>
				<view class="items">
					<view :class="chooseList.includes(item1.id)?'active':'item'" v-for="(item1,index1) in item.child"
						:key="index1" @click="choose(item1.id)">
						{{item1.name}}
					</view>
					<view style="width: 22%;">

					</view>
					<view style="width: 22%;">

					</view>
					<view style="width: 22%;">

					</view>
				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;">

		</view>
		<view class="footer">
			<view class="btn" @click="submit">
				确认保存
			</view>
		</view>
	</view>
</template>

<script>
	import {
		bannerList,
		cateList,
		infoList
	} from "@/request/api/tiezi.js"
	export default {
		data() {
			return {
				allList: [],
				chooseList: []
			}
		},
		methods: {
			submit() {
				uni.setStorageSync("chooseList", this.chooseList);
				uni.showToast({
					icon: "none",
					title: "保存成功"
				})
			},
			choose(id) {
				if (this.chooseList.includes(id)) {
					this.chooseList.forEach((item, index) => {
						if (item == id) {
							this.chooseList.splice(index, 1)
						}
					})
				} else {
					this.chooseList.push(id)
				}
			}
		},
		onLoad() {
			cateList().then(res => {
				this.allList = res.data;
				let chooseList = uni.getStorageSync("chooseList");
				if (chooseList) {
					this.chooseList = uni.getStorageSync("chooseList");
				} else {
					this.allList.forEach(item => {
						item.child.forEach(item2 => {
							this.chooseList.push(item2.id)
						})
					})
				}
			})
		}

	}
</script>

<style scoped lang="scss">
	.box {
		margin: 30rpx;
		margin-top: 0;
		border-radius: 30rpx;
		background-color: #fff;
		padding: 30rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		width: 100vw;
	}

	.btn {
		background-color: #4CC34A;
		margin: 30rpx;
		padding: 30rpx;
		text-align: center;
		border-radius: 100px;
		color: white;
	}

	.title {

		margin-bottom: 20rpx;
		font-weight: 600;
	}

	.items {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 22%;
			background-color: #F7F7F7;
			text-align: center;
			padding: 12rpx 0;
			border-radius: 100px;
			margin-bottom: 20rpx;
			font-size: 26rpx;
		}

		.active {

			width: 22%;
			text-align: center;
			padding: 12rpx 0;
			border-radius: 100px;
			margin-bottom: 20rpx;
			font-size: 26rpx;
			color: white;
			background-color: #4CC34A;
		}
	}
</style>